{% extends "base.html" %}
{% from '_helpers.html' import external_bugs %}
{% from '_helpers.html' import external_urls %}
{% from '_helpers.html' import metric_table %}
{% from '_helpers.html' import package_counts_table %}
{% from '_helpers.html' import history_graph %}
{% from '_helpers.html' import show_backtrace %}
{% from "_helpers.html" import render_field %}

{% block title %}
Problem #{{ problem.id }} -
{% with comps = problem.unique_component_names|list %}
  {{comps[0:3]|join(", ")}} in {{ problem.crash_function|truncate(80, True) }}
{% endwith %}
{% endblock %}

{% block js %}
<script src="{{ url_for('static', filename='js/color.js')}}"></script>
<script src="{{ url_for('static', filename='js/jquery.flot.js')}}"></script>
<script src="{{ url_for('static', filename='js/jquery.flot.pie.js')}}"></script>
<script src="{{ url_for('static', filename='js/jquery.flot.stack.js')}}"></script>
<script src="{{ url_for('static', filename='js/jquery.flot.time.js')}}"></script>
{% if permalink_query %}
<script type="text/javascript">
  $(document).ready(function() {
    try {
      history.replaceState(null, "", "{{url_for('problems.bthash_permalink')}}?{{ permalink_query|safe }}")
    } catch(err) {};
  });
</script>
{% endif %}
{% endblock js %}

{% block body %}
<div class='problem'>
  <div class='row'>
    <div class='col-md-6'>
      <h3>Info</h3>
      <dl class='info dl-horizontal'>
        {% if permalink_query %}
          <dt><a href="{{url_for('problems.bthash_permalink')}}?{{ permalink_query|safe }}"><span class="glyphicon glyphicon-link"></span> Permalink</a></dt>
          <dd></dd>
          {% if extfafs %}
            <dt>Ext. instances</dt>
            <dd>
              {% for extfaf in extfafs %}
                <a href="{{extfaf.baseurl}}/problems/bthash/?{{ permalink_query|safe }}">{{extfaf.name}}</a>{% if not loop.last %}, {% endif %}
              {% endfor %}
            </dd>
          {% endif %}
        {% endif %}
        <dt>Function</dt>
        <dd>
          {{ problem.crash_function|truncate(40, True) }}
        </dd>
        <dt>First occurrence</dt>
        <dd>{{ problem.first_occurrence.strftime("%Y-%m-%d") }}</dd>
        <dt>Last occurrence</dt>
        <dd>{{ problem.last_occurrence.strftime("%Y-%m-%d") }}</dd>
        {% if problem.probable_fixes %}
        <dt class="cursor-help" title="List of versions of affected packages where this problem stopped occurring in the given release.">Probable fixes</a></dt>
        <dd>{% for pf in problem.probable_fixes %}{{pf}}{% if not loop.last %}<br/>{% endif %}{% endfor %}</dd>
        {% endif %}
        <dt>State</dt>
        <dd>
          <span class="label label-{{ problem.status|problem_label }}">
            {{ problem.status }}
          </span>
        </dd>
        {% if solutions %}
        <dt>Solution</dt>
        <dd>
          {% for solution in solutions %}
            {{ solution.note_html }}<br>
          {% endfor %}
        </dd>
        {% endif %}
        <dt>Components</dt>
        <dd>
            {{problem.unique_component_names|join(", ")}}
            {% if problem.tainted %}
              <span class="label label-warning" onclick="collapseComponents()">Tainted</span>
            {% endif %}


            {% if is_maintainer %}
              <a id="collapse-btn" class="fa fa-chevron-down" aria-hidden="true" onclick="collapseComponents()"></a>
              <div id="components-reassign">
                <form id="comp-reassign-form" class="form-inline" method="POST">
                  {{ render_field(components_form.component_names, placeholder="Components", class="component-names") }}
                  <button class="btn btn-default" type="submit">Reassign</button>
                </form>
              </div>
            {% endif %}
       </dd>
       {% if problem.components_reassign %}
         <p id="comp-assign-info">Assigned {{problem.components_reassign.date }} by {{
         problem.components_reassign.username }}.</p>
       {% endif %}
        <dt class="hide">Quality</dt>
        <dd class="hide">{{ problem.quality }}</dd>
        {% if problem.bugs %}
          <dt>External bugs</dt>
          <dd>{{ external_bugs(problem.id, problem.bugs, false) }}</dd>
        {% endif %}

        {% if problem.urls %}
          <dt>External URLs
            <a role="button" data-toggle="tooltip" title="URLs are grouped by reports. The newest URL is always on the top.">
              <span class="fa fa-lg fa-info-circle">
            </a>
          </dt>
          <dd>
            <ul>
              {{ external_urls(problem.urls) }}
            </ul>
          </dd>
        {% endif %}
      </dl>

      {# reassign components #}
      <script>
        $(document).ready(function() {
          var btn = $('button:contains(\'Reassign\')');
          btn.attr('disabled', true);
          $('.tt-input').keyup(function() {
            if ($(this).val() != '') {
              btn.attr('disabled', false)
            }
          })
        });

        function collapseComponents() {
          var action = $('#components-reassign').css('visibility') == 'hidden' ?
              'visible' :
              'hidden';
          $('#components-reassign').css('visibility', action);
        }
     </script>

      {# graphs #}

      {% if osreleases|length > 1 or arches|length > 1 %}
        <h3>Graphs</h3>
        <div class='row'>
          <div id="release_graph" class="col-md-6 graph"></div>
          <div id="arch_graph" class="col-md-6 graph"></div>
        </div>
        <script>
          var release_data = [];
          {% for release, cnt in osreleases %}
            release_data.push( {
              label: "{{ release.opsys.name }} {{ release.version }}",
              data: {{ cnt }}, } );
          {% endfor %}

          var arch_data = [];
          {% for arch, cnt in arches %}
            arch_data.push( {
              label: "{{ arch.name }}",
              data: {{ cnt }}, } );
          {% endfor %}

          var pie_chart_options =  {
              series: {
                pie: {
                  show: true,
                },
              },
            }

          {% if osreleases|length > 1 %}
            $.plot($('#release_graph'), release_data, pie_chart_options);
          {% endif %}
          {% if arches|length > 1 %}
            $.plot($('#arch_graph'), arch_data, pie_chart_options);
          {% endif %}
        </script>
      {% endif %}
    </div>

    {# metrics #}

    <div class='col-md-6 statistics'>
      <h3>Statistics</h3>
      {{ metric_table('Operating system', osreleases) }}

      {{ metric_table('Architecture', arches) }}

      {{ metric_table('Executable', exes) }}

      {{ package_counts_table(package_counts) }}

      {% if package_counts %}
        <p class="text-muted">Packages names with count less than the total count of reports are most probably not the cause of the problem.</p>
      {% endif %}
    </div>
  </div>

  <div class='row'>
    <div class="col-md-12">
      <h3>History</h3>
    </div>
    <div class="col-md-4">
      <h4>Daily:</h4>
      <div id="daily_legend" class="col-md-12"></div>
    </div>
    <div class="col-md-4">
      <h4>Weekly:</h4>
      <div id="weekly_legend" class="col-md-12"></div>
    </div>
    <div class="col-md-4">
      <h4>Monthly:</h4>
      <div id="monthly_legend" class="col-md-12"></div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-4">
      {{ history_graph(daily_history, "daily", "day", False) }}
    </div>
    <div class="col-md-4">
      {{ history_graph(weekly_history, "weekly", "week", False) }}
    </div>
    <div class="col-md-4">
      {{ history_graph(monthly_history, "monthly", "month", False) }}
    </div>
  </div>

  <h3>Report backtrace</h3>
  {% if bt_diff_form and problem.reports|length > 1 %}
    <form class="form-inline" method="GET" action="{{ url_for('reports.diff') }}">
      {{ render_field(bt_diff_form.lhs) }}
      {{ render_field(bt_diff_form.rhs) }}
      <button class="btn btn-default" type="submit">Backtrace diff</button>
    </form>
    <br/>
  {% endif %}
  <ul class="nav nav-tabs">
    {% for report in problem.active_reports %}
      <li
        {% if loop.first %}
          class="active"
        {% endif %}
      >
        <a href="#{{ report.id }}" data-toggle="tab">{{ report.id }}</a>
      </li>
    {% endfor %}
    {% if problem.archived_reports %}
      {% set form = "reports" if problem.archived_reports|length > 1 else "report" %}
      <li>
        <a class="inactive-link">
          ({{ problem.archived_reports|length }} archived {{ form }})
        </a>
      </li>
    {% endif %}
  </ul>

  <div class="tab-content">
    {% for report in problem.active_reports %}
      <div class="tab-pane
        {% if loop.first %}
          active
        {% endif %}
      " id="{{ report.id }}">
        <a href="{{ url_for('reports.item', report_id=report.id) }}">Complete report #{{ report.id }}</a>
        {{ show_backtrace(report.backtraces[0].frames, report.type, report.oops)}}
      </div>
    {% endfor %}
  </div>
  {# comments #}
  {% if is_maintainer and problem.comments %}
    <h3>Comments <small>Attached by users who sent the report.</small></h3>
    <ul id="comments">
    {% set row_limit = 15 %}
    {% for comment in problem.comments %}
      <li
      {% if loop.index > row_limit and comments|length > row_limit+1 %} {# avoid +1 more #}
        class='hide'
      {% endif %}
      >
        <p class="pre"><!-- comment id {{comment.id}} -->{{comment.text}}</p>
        <p><small>Comment saved {{comment.saved.strftime("%Y-%m-%d")}}</small></p>
      </li>
      {% if problem.comments|length > row_limit+1 and loop.index == row_limit %}
        <script type="text/javascript">
          $(document).ready(function() {
            $("#comments .btn-more").click(function() {
              $(this).parents("ul").find('li.hide').removeClass('hide');
              $(this).parents("p").remove();
            });
          });
        </script>
        <p>
          <button class="btn btn-mini btn-more" type="button">
            + {{ problem.comments|length-row_limit }} more
          </button>
        </p>
      {% endif %}
    {% endfor %}
    </ul>
  {% endif %}
</div>
{% endblock %}
